<template>
  <view>
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar title="微分转账"
      left-icon="left" @clickLeft="back" />
    <view class="differential">
      <view class="differ_text">
        您的微分
      </view>
      <view class="differ_num">
        {{balance}}
      </view>
    </view>
    <view class="giving_num u-flex u-ali-center">
      <view class="iput_label">
        转账数量
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="text" v-model="num" placeholder="请填写您要转账的数量">
    </view>
    <view class="giving_num u-flex u-ali-center" style="margin-top: 20rpx;">
      <view class="iput_label">
        手机号码
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="text" v-model="phone" placeholder="请填写您的手机号码">
    </view>
    <view class="giving_num u-flex u-ali-center" style="margin-top: 20rpx;">
      <view class="iput_label">
        支付密码
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="password" v-model="pass" placeholder="请填写您的支付密码">
    </view>
    <view class="giv_button" @click="giveSubmit">
      确认赠送
    </view>
  </view>
</template>

<script>
  import {
    putEnerygTransfer,
    getEnerygLog
  } from '../../api/index.js'
  import md5 from '../../utils/md5.js'
  export default {
    data() {
      return {
        img: '../../static/differential/lottery_bg.png',
        num: '',
        phone: '',
        pass: '',
        acIndex: 212,
        list: [],
        balance: ''
      }
    },
    onLoad() {
      this.get_info()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      clickRights() {
        console.log('微分赠送');
      },
      get_info() {
        const vm = this
        getEnerygLog({
          page: vm.page,
          status: vm.acIndex
        }).then(res => {
          if (res.code === 1) {
            vm.balance = res.data.balance
          }
        })
      },
      giveSubmit() {
        const vm = this
        putEnerygTransfer({
          mobile: vm.phone,
          num: vm.num,
          paypass: md5.hex_md5(vm.pass),
          type: 2
        }).then(res => {
          if (res.code === 1) {
            vm.$ui.toast(res.msg)
            vm.mobile = ''
            vm.num = ''
            vm.paypass = ''
          }else {
            vm.$ui.toast(res.msg)
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .differential {
    position: relative;
    margin: 35rpx auto 40rpx;
    width: 608rpx;
    height: 289rpx;
    background-image: url(@/static/differential/lottery_bg.png);
    background-size: 100% 100%;

    .differ_text {
      position: absolute;
      top: 101rpx;
      width: 100%;
      font-size: 28rpx;
      line-height: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
    }

    .differ_num {
      position: absolute;
      top: 157rpx;
      width: 100%;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFD76B;
      text-align: center;
    }
  }

  .differ_title {
    position: relative;
    top: 0;
    left: 72rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #333333;
  }

  .differ_box {
    position: relative;
    padding: 28rpx 29rpx 28rpx 26rpx;
    margin: 20rpx auto;
    width: 609rpx;
    height: 124rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    box-sizing: border-box;

    .differ_box_title {
      font-size: 25rpx;
      line-height: 25rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }

    .differ_box_time {
      position: absolute;
      top: 80rpx;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }

    .differ_box_plus {
      position: absolute;
      top: 50%;
      right: 29rpx;
      transform: translateY(-50%);
      font-size: 34rpx;
      font-weight: bold;
      color: #ECD489;
    }

    .differ_box_plus1 {
      position: absolute;
      top: 50%;
      right: 29rpx;
      transform: translateY(-50%);
      font-size: 34rpx;
      font-weight: bold;
      color: #DA5959;
    }
  }

  .giving_num {
    margin: 32rpx auto 0rpx;
    padding-left: 22rpx;
    width: 609rpx;
    height: 78rpx;
    background: #FFFFFF;
    border-radius: 14rpx;
    box-sizing: border-box;

    .iput_label {
      font-size: 25rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }

    .iput_shu {
      margin-left: 21rpx;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
    }
  }

  .giv_button {
    margin: 39rpx auto;
    width: 610rpx;
    height: 82rpx;
    background: linear-gradient(0deg, #CAAC5D 0%, #E7C573 100%);
    border-radius: 20rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 82rpx;
  }
</style>
